<template>
  <div>
    <el-collapse v-model="activeName"
                 accordion>
      <el-collapse-item v-for="item in activeList"
                        :key="item.name"
                        :title="item.title"
                        :name="item.name">
        <div v-html="item.text"></div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: 'PS_ZB',
  data() {
    return {
      activeName: '1',
      activeList: [
        {
          title: '服装',
          name: 1,
          text:
            '可以自备，也可以来我们这里选服装'
        },
        {
          title: '化妆',
          name: 2,
          text:
            '如果对化妆品过敏，可以选择带来自己常用的化妆品'
        },
        {
          title: '拍摄当天',
          name: 3,
          text:
            '请尽量避免带过多的人同行，以免影响拍摄进度'
        },
        {
          title: '其他',
          name: 4,
          text:
            '拍外景记得准备驱蚊水、防晒霜、水等'
        },
        {
          title: '精神准备',
          name: 5,
          text:
            '拍摄前请保证前一晚睡眠良好，保持好心情，不要吃太多，记得吃早餐'
        }
      ]
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-collapse-item__header.is-active {
  color: #000000;
  font-size: 16px;
}
/deep/ .el-collapse-item__content {
  color: #909399;
  padding: 0 11px;
}
</style>
